<template>
  <div class="editor-container">
    <Froala id="edit" :tag="'textarea'" :config="config" v-model:value="value"></Froala>
  </div>
</template>

<script setup>
import { watch } from 'vue';

const props = defineProps({
  placeholder: String
});

const emit = defineEmits(['update:value']);
const value = defineModel('value', String);
const config = {
  placeholderText: props.placeholder,
  language: 'zh_cn',
  charCounterCount: false,
  toolbarSticky: true,
  zIndex: 0,
  heightMax: '60vh',
  events: {
    'image.beforeUpload': function (files) {
      // Use base64 images
      const editor = this;
      if (files.length) {
        // Create a File Reader.
        const reader = new FileReader();
        // Set the reader to insert images when they are loaded.
        reader.onload = function (e) {
          const result = e.target.result;
          editor.image.insert(result, null, null, editor.image.get());
        };
        // Read image as base64.
        reader.readAsDataURL(files[0]);
      }
      editor.popups.hideAll();
      return false;
    }
  }
};

watch(value, (newValue) => {
  if (!newValue) {
    emit('update:value', '');
  }
});
</script>

<style lang="scss" scoped>
.editor-container {
  width: 100%;
  height: auto;
}
</style>
